<template>
  <div class="main">
    <div class="title">
      {{title}}
    </div>
    <div class="choice">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="文章类型：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>不限</el-radio>
              <el-radio label="2" border>IT科技</el-radio>
              <el-radio label="2" border>财经商业</el-radio>
              <el-radio label="2" border>女性时尚</el-radio>
              <el-radio label="2" border>汽车评测</el-radio>
              <el-radio label="2" border>教育培训</el-radio>
              <el-radio label="2" border>旅游酒店</el-radio>
              <el-radio label="2" border>健康医疗</el-radio>
              <el-radio label="2" border>文化艺术</el-radio>
              <el-radio label="2" border>娱乐八卦</el-radio>
              <el-radio label="2" border>新闻资讯</el-radio>
              <el-radio label="2" border>体育运动</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="出稿时间：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>不限</el-radio>
              <el-radio label="2" border>当天</el-radio>
              <el-radio label="2" border>2天</el-radio>
              <el-radio label="2" border>2天以上</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="写手类型：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>不限</el-radio>
              <el-radio label="2" border>个人</el-radio>
              <el-radio label="2" border>团队</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="可修改次数：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>不限</el-radio>
              <el-radio label="2" border>1次</el-radio>
              <el-radio label="2" border>2次</el-radio>
              <el-radio label="2" border>3次</el-radio>
              <el-radio label="2" border>包满意</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="擅长类型：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>不限</el-radio>
              <el-radio label="2" border>故事</el-radio>
              <el-radio label="2" border>新闻</el-radio>
              <el-radio label="2" border>评论</el-radio>
              <el-radio label="2" border>采访</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="是否接受议价">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>不限</el-radio>
              <el-radio label="2" border>接受</el-radio>
              <el-radio label="2" border>不接受</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="文章字数：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>不限</el-radio>
              <el-radio label="2" border>500左右</el-radio>
              <el-radio label="2" border>1000左右</el-radio>
              <el-radio label="2" border>1500左右</el-radio>
              <el-radio label="2" border>2000左右</el-radio>
              <el-radio label="2" border>2000以上</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="价格分类：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>不限</el-radio>
              <el-radio label="2" border>0-50</el-radio>
              <el-radio label="2" border>51-100</el-radio>
              <el-radio label="2" border>101-200</el-radio>
              <el-radio label="2" border>201-500</el-radio>
              <el-radio label="2" border>500以上</el-radio>
            </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <div style="margin-top: 20px">
        <el-form ref="form" :model="form" label-width="100px">
          <el-radio-group v-model="form.radio2" size="medium" class="botradio">
            <el-radio-button label="1" >写手查找</el-radio-button>
            <el-radio-button label="2">收藏写手</el-radio-button>
          </el-radio-group>

          <el-form-item label="搜索写手：" class="mname">
              <el-input v-model="form.input" placeholder="请输入要搜索的媒体名称"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="table_bottom">
      <el-table
        ref="multipleTable"
        :data="tableData"
        stripe
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="type"
          label="文章类型	"
          width="120"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="写手名称"
          width="120"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="bargaining"
          label="可否议价"
          header-align="center"
          align="center"
          width="120"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="contact"
          label="联系方式"
          width="120"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="price"
          label="代写价格"
          width="120"
          header-align="center"
          align="center"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="time"
          label="出稿时间"
          width="120"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="nember"
          label="可修改次数 "
          width="120"
          header-align="center"
          align="center"
          show-overflow-tooltip>
           <!-- <template slot-scope="scope">
             <div>
               <img :src="require(`@/assets/baidu${scope.row.pcWeight}.png`)"/>
             </div>
           </template> -->
        </el-table-column>
        <el-table-column
          prop="wordNumber"
          label="文章字数 "
          width="120"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="praise"
          label="好评率 "
          width="120"
          header-align="center"
          align="center"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="remarks"
          label="备注 "
          header-align="center"
          align="center"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="collection"
          label="收藏 "
          width="120"
          header-align="center"
          align="center"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
export default {
  props: [
    'title'
  ],
  data () {
    return {
      form: {
        radio1: '1',
        radio2:"1",
        input:""
      },
      tableData:[{
        type:"新闻资讯",
        name:"苏先生",
        bargaining:"不可以议价",
        contact:"1558023616",
        price:"85.00",
        time:"一天",
        nember:"包满意",
        wordNumber:"1500左右",
        praise:"1",
        remarks:"不带联系方式，默认自动删除。金融医疗相关都可发！",
        collection:"心"
      },
      {
        type:"新闻资讯",
        name:"苏先生",
        bargaining:"不可以议价",
        contact:"1558023616",
        price:"85.00",
        time:"一天",
        nember:"包满意",
        wordNumber:"1500左右",
        praise:"1",
        remarks:"不带联系方式，默认自动删除。金融医疗相关都可发！",
        collection:"心"
      },
      {
        type:"新闻资讯",
        name:"苏先生",
        bargaining:"不可以议价",
        contact:"1558023616",
        price:"85.00",
        time:"一天",
        nember:"包满意",
        wordNumber:"1500左右",
        praise:"1",
        remarks:"不带联系方式，默认自动删除。金融医疗相关都可发！",
        collection:"心"
      },
      {
        type:"新闻资讯",
        name:"苏先生",
        bargaining:"不可以议价",
        contact:"1558023616",
        price:"85.00",
        time:"一天",
        nember:"包满意",
        wordNumber:"1500左右",
        praise:"1",
        remarks:"不带联系方式，默认自动删除。金融医疗相关都可发！",
        collection:"心"
      }]

    };
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
}
</script>

<style lang="scss" scoped>
.main{
  min-height: 755px;
  min-width: 1000px;
}
.botradio{
  float:left;
}
.excel{
  float: left;
}
.table_bottom{
  margin-bottom: 86px;
}
.seamless-warp2 {
  overflow: hidden;
  height: 33px;
  width: 380px;
  float: left;
  margin: 0 20px;
  border:1px solid #dedfe6;
  color: #ff7b00;
  ul.item {
    width: 1300px;
    li {
        float: left;
        margin-right: 20px;
        list-style:none;
        margin-top: -8px;
    }
  }
}
.title {
    color: #F37B1D;
    font-weight: 700;
    padding-bottom: 16px;
    font-size: 18px;
    border-bottom: 1px #dedede solid;
}
.mname{
  width: 310px;
  float: left;
  margin-left: 25px;
}
.choice{
  margin-top: 18px;
  .el-radio{
    margin:0 8px 8px 0;
  }
  .el-radio.is-bordered+.el-radio.is-bordered{
    margin-left:0;
  }
  .el-form-item{
    margin-bottom: 2px;
  }
}
#footer_box {
    z-index: 999;
    position: fixed;
    left: 243px;
    bottom: 0;
    height: auto;
    border-top: 1px solid #26A7E0;
    padding: 10px;
    background: #4795C5;
    color: #fff;
    width: 100%;
    font-size: 14px;
    padding-top: 27px;
    margin-left: 6px;
    padding-left: 441px;
    .am-btn-group,
    .am-btn-group-stacked {
        position: relative;
        display: inline-block;
        vertical-align: middle;
    }
    .el-button--primary {
        background: #ea6e0c;
        margin-left: 11px;
    }
}
</style>
